<template>
  <div class="order_detail">
    <div class="order-goods">
      <van-card v-for="item in orderGoods"
                :key="item.id"
                :title="item.goodsName"
                desc="暂无描述"
                :num="item.number"
                :price="item.price +'.00'"
                :thumb="item.picUrl"></van-card>

      <van-cell-group>
        <van-cell title="商品金额">
          <span class="red">{{orderInfo.goodsPrice * 100 | yuan}}</span>
        </van-cell>
        <van-cell title="快递费用">
          <span class="red">{{orderInfo.freightPrice * 100 | yuan}}</span>
        </van-cell>
      </van-cell-group>
    </div>

    <van-cell-group style="margin-top: 20px;">
      <van-cell icon="dingwei"
                :title="`${orderInfo.consignee}  ${orderInfo.mobile}`"
                :label="orderInfo.address"/>
    </van-cell-group>

    <van-cell-group style="margin-top: 20px;">
      <van-cell title="下单时间">
        <span>{{orderInfo.addTime }}</span>
      </van-cell>
      <van-cell title="订单编号">
        <span>{{orderInfo.orderSn }}</span>
      </van-cell>
      <van-cell title="订单备注">
        <span>{{orderInfo.remark }}</span>
      </van-cell>

      <van-cell title="实付款：">
        <span class="red">{{orderInfo.actualPrice * 100 | yuan}}</span>
      </van-cell>
      <!-- 订单动作 -->
      <van-cell>
        <van-button size="small"
                    v-if="handleOption.cancel"
                    @click="cancelOrder(orderInfo.id)"
                    style=" float:right"
                    round
                    type="danger">取消订单
        </van-button>
        <van-button size="small"
                    v-if="handleOption.pay"
                    @click="payOrder(orderInfo.id)"
                    style=" float:right"
                    round
                    type="danger">去支付
        </van-button>
        <van-button size="small"
                    v-if="handleOption.delete"
                    @click="deleteOrder(orderInfo.id)"
                    style=" float:right"
                    type="danger">删除订单
        </van-button>
        <van-button size="small"
                    v-if="handleOption.confirm"
                    @click="confirmOrder(orderInfo.id)"
                    style=" float:right"
                    type="danger">确认收货
        </van-button>
        <van-button size="small"
                    v-if="handleOption.refund"
                    @click="refundOrder(orderInfo.id)"
                    style=" float:right"
                    type="danger">退款
        </van-button>
      </van-cell>
    </van-cell-group>

    <van-cell-group v-if="showExp()"
                    style="margin-top: 20px;">
      <van-cell title="快递公司">
        <span>{{orderInfo.expCode }}</span>
      </van-cell>
      <van-cell title="快递编号">
        <span>{{orderInfo.expNo }}</span>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
  import {Button, Card, Cell, CellGroup, Dialog, Field, SubmitBar} from 'vant';
  import _ from 'lodash';
  import {orderConfirm, orderDelete, orderDetail, orderRefund} from '@/api/api';

  export default {
    data() {
      return {
        isSubmit: false,
        isDisabled: false,
        orderInfo: {},
        orderGoods: [],
        handleOption: {},
        expressInfo: {}
      };
    },
    created() {
      this.init();
    },

    methods: {
      showExp() {
        return _.has(this.orderInfo, 'expNo');
      },
      deleteOrder(id) {
        let that = this;
        this.$dialog
                .confirm({message: '确定要删除该订单吗?'})
                .then(() => {
                  orderDelete({orderId: id}).then(() => {
                    this.$toast('已删除订单');
                    this.$router.go(-1);
                  });
                })
                .catch(() => {
                });
      },
      cancelOrder(id) {
        this.$dialog
                .confirm({message: '确定要取消该订单吗?'})
                .then(() => {
                  orderDelete({orderId: id}).then(() => {
                    this.init();
                    this.$toast('已取消该订单');
                  });
                })
                .catch(() => {
                });
      },
      confirmOrder(id) {
        this.$dialog
                .confirm({
                  message: '请确认收到货物, 确认收货后无法撤销!'
                })
                .then(() => {
                  orderConfirm({orderId: id}).then(() => {
                    this.init();
                    this.$toast('已确认收货');
                  });
                })
                .catch(() => {
                });
      },
      refundOrder(id) {
        this.$dialog
                .confirm({message: '确定要申请退款吗?'})
                .then(() => {
                  orderRefund({orderId: id}).then(() => {
                    this.init();
                    this.$toast('已申请订单退款');
                  });
                })
                .catch(() => {
                });
      },
      commentOrder(id) {
      },
      toPay(id) {
        this.$router.push({name: 'payment', params: {orderId: id}});
      },
      init() {
        let orderId = this.$route.query.orderId;
        orderDetail({orderId: orderId}).then(res => {
          var data = res.data.data;
          this.orderInfo = data.orderInfo;
          this.orderGoods = data.orderGoods;
          this.handleOption = data.orderInfo.handleOption;
          this.expressInfo = data.expressInfo;
        });
      }
    },

    components: {
      [Dialog.name]: Dialog,
      [CellGroup.name]: CellGroup,
      [Cell.name]: Cell,
      [Button.name]: Button,
      [SubmitBar.name]: SubmitBar,
      [Card.name]: Card,
      [Field.name]: Field
    }
  };
</script>


<style lang="scss" scoped>
  .order_detail {
    padding-bottom: 70px;
  }
</style>
